<template>
  <div class="detailContentBox">
    <el-form ref="socialForm" :model="sizeForm.userSocialSecurity" :rules="rules" label-width="100px" size="mini">
      <el-form-item label="参保城市" prop="participatingInTheCity">
        <el-select
          v-model="sizeForm.userSocialSecurity.participatingInTheCity"
          value-key="id"
          placeholder="请选择参保城市"
          @change="socialSecurityCityChange"
        >
          <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="社保类型" prop="socialSecurityType">
        <el-select v-model="sizeForm.userSocialSecurity.socialSecurityType" placeholder="请选择社保类型">
          <el-option label="首次开户" :value="1" />
          <el-option label="非首次开户" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="户籍类型" prop="householdRegistrationType">
        <el-select v-model="sizeForm.userSocialSecurity.householdRegistrationType" placeholder="请选择户籍类型">
          <el-option label="本市城镇" :value="1" />
          <el-option label="本市农村" :value="2" />
          <el-option label="外阜城镇" :value="3" />
          <el-option label="外阜农村" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="社保基数" prop="socialSecurityBase">
        <el-input v-model="sizeForm.userSocialSecurity.socialSecurityBase" type="number" style="width:38%" />（基数范围是3387 ~ 25401）
      </el-form-item>
      <el-form-item label="工伤比例" prop="industrialInjuryRatio">
        <el-input v-model="sizeForm.userSocialSecurity.industrialInjuryRatio" style="width:38%" type="number" />（比例范围是0.2％ ~ 3％，推荐0.2％）
      </el-form-item>
      <el-form-item label="社保缴纳">
        <el-form-item label="个人" label-width="74px" style="display:inline-block">
          <el-input
            v-model="personalPayment"
            style="width:100%"
            placeholder="个人"
            inline="true"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="公司" label-width="74px" style="display:inline-block">
          <el-input
            v-model="companyPayment"
            style="width:100%"
            placeholder="企业"
            size="small"
            inline="true"
            :disabled="true"
          />
        </el-form-item>
        <el-table :data="computePaymentItemList">
          <el-table-column label="缴费项目" prop="name" />
          <el-table-column label="企业基数">
            <template slot-scope="paymentItem">
              <span v-show="paymentItem.row.switchCompany">{{ sizeForm.userSocialSecurity.socialSecurityBase }}</span>
            </template>
          </el-table-column>
          <el-table-column label="企业比例">
            <template slot-scope="paymentItem">
              <span v-show="paymentItem.row.switchCompany">{{ paymentItem.row.scaleCompany }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="企业缴纳">
            <template slot-scope="paymentItem">
              <el-input
                v-show="paymentItem.row.switchCompany"
                v-model="paymentItem.row.companyPay"
                :disabled="true"
              />
            </template>
          </el-table-column>
          <el-table-column label="个人基数">
            <template slot-scope="paymentItem">
              <span v-show="paymentItem.row.switchPersonal">{{ sizeForm.socialSecurityBase }}</span>
            </template>
          </el-table-column>
          <el-table-column label="个人比例">
            <template slot-scope="paymentItem">
              <span v-show="paymentItem.row.switchPersonal">{{ paymentItem.row.scalePersonal }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="个人缴纳">
            <template slot-scope="paymentItem">
              <el-input
                v-show="paymentItem.row.switchPersonal"
                v-model="paymentItem.row.personalPay"
                :disabled="true"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="社保备注">
        <el-input
          v-model="sizeForm.userSocialSecurity.socialSecurityNotes"
          type="textarea"
          :rows="2"
          placeholder="1-300字符"
          maxlength="300"
          style="width:38%"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="公积金城市" prop="providentFundCity">
        <el-select v-model="sizeForm.userSocialSecurity.providentFundCity" placeholder="请选择公积金城市" value-key="id">
          <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="公积金基数" prop="providentFundBase">
        <el-input v-model="sizeForm.userSocialSecurity.providentFundBase" style="width:38%" type="number" />（基数范围是2273 ~ 25401）
      </el-form-item>
      <el-form-item label="企业比例" prop="enterpriseProportion">
        <el-input
          v-model="sizeForm.userSocialSecurity.enterpriseProportion"
          style="width:38%"
          placeholder="12"
          type="number"
        />（比例范围是5％ ~ 12％，推荐12％ ）
      </el-form-item>
      <el-form-item label="个人比例" prop="personalProportion">
        <el-input
          v-model="sizeForm.userSocialSecurity.personalProportion"
          style="width:38%"
          placeholder="12"
          type="number"
        />（比例范围是5％ ~ 12％，推荐12％ ）
      </el-form-item>
      <el-form-item label="公积金缴纳">
        <el-form-item
          label="个人"
          label-width="50px"
          style="display:inline-block"
          prop="personalProvidentFundPayment"
        >
          <el-input
            v-model="sizeForm.userSocialSecurity.personalProvidentFundPayment"
            style="width:100%"
            placeholder="个人"
            inline="true"
            type="number"
          />
        </el-form-item>
        <el-form-item
          label="公司"
          label-width="50px"
          style="display:inline-block"
          prop="enterpriseProvidentFundPayment"
        >
          <el-input
            v-model="sizeForm.userSocialSecurity.enterpriseProvidentFundPayment"
            style="width:100%"
            placeholder="企业"
            inline="true"
            type="number"
          />
        </el-form-item>
        <el-form-item style="display:inline-block">
          <span>（为自动测算结果，可手动调整）</span>
        </el-form-item>
      </el-form-item>
      <el-form-item label="公积金备注">
        <el-input
          v-model="sizeForm.userSocialSecurity.providentFundNotes"
          type="textarea"
          :rows="2"
          placeholder="1-300字符"
          style="width:38%"
          maxlength="300"
          show-word-limit
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit()">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveSocialDate } from '@/api/social'
export default {
  props: {
    sizeForm: {
      type: Object
    },
    cityList: {
      type: Array
    },
    paymentItemList: {
      type: Array
    }
  },
  data() {
    var validateSocialSecurityBase = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入社保基数'))
      } else if (value < 3387 || value > 25401) {
        callback(new Error('请不要超出范围，基数范围是3387 ~ 25401'))
      } else {
        callback()
      }
    }
    var validateIndustrialInjuryRatio = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入工伤比例'))
      } else if (value < 0.2 || value > 3) {
        callback(new Error('请不要超出范围，比例范围是0.2％ ~ 3％'))
      } else {
        callback()
      }
    }
    var validateProvidentFundBase = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入公积金基数'))
      } else if (value < 2273 || value > 25401) {
        callback(new Error('请不要超出范围，基数范围是2273 ~ 25401'))
      } else {
        callback()
      }
    }
    var validateEnterpriseProportion = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入企业比例'))
      } else if (value < 5 || value > 12) {
        callback(new Error('请不要超出范围，比例范围是5％ ~ 12％'))
      } else {
        callback()
      }
    }
    var validatePersonalProportion = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入个人比例'))
      } else if (value < 5 || value > 12) {
        callback(new Error('请不要超出范围，比例范围是5％ ~ 12％'))
      } else {
        callback()
      }
    }
    return {
      personalPayment: 0.0,
      companyPayment: 0.0,
      rules: {
        participatingInTheCity: [
          { required: true, message: '请选择参保城市1234', trigger: 'change' }
        ],
        socialSecurityType: [
          { required: true, message: '请选择社保类型', trigger: 'change' }
        ],
        householdRegistrationType: [
          { required: true, message: '请选择户籍类型', trigger: 'change' }
        ],
        socialSecurityBase: [
          {
            required: true,
            validator: validateSocialSecurityBase,
            trigger: 'blur'
          }
        ],
        industrialInjuryRatio: [
          {
            required: true,
            validator: validateIndustrialInjuryRatio,
            trigger: 'blur'
          }
        ],
        providentFundCity: [
          { required: true, message: '请选择公积金城市', trigger: 'change' }
        ],
        providentFundBase: [
          {
            required: true,
            validator: validateProvidentFundBase,
            trigger: 'blur'
          }
        ],
        enterpriseProportion: [
          {
            required: true,
            validator: validateEnterpriseProportion,
            trigger: 'blur'
          }
        ],
        personalProportion: [
          {
            required: true,
            validator: validatePersonalProportion,
            trigger: 'blur'
          }
        ],
        enterpriseProvidentFundPayment: [
          {
            required: true,
            message: '请输入公司公积金缴纳数额',
            trigger: 'change'
          }
        ],
        personalProvidentFundPayment: [
          {
            required: true,
            message: '请输入个人公积金缴纳数额',
            trigger: 'change'
          }
        ]
      }

    }
  },
  watch: {
    //   监听公积金基数的变化
    'sizeForm.userSocialSecurity.providentFundBase': function() {
      this.changeProvidentFundPayment()
    },
    // 监听企业比例的变化
    'sizeForm.userSocialSecurity.enterpriseProportion': function() {
      this.changeProvidentFundPayment()
    },
    // 监听个人比例的变化
    'sizeForm.userSocialSecurity.personalProportion': function() {
      this.changeProvidentFundPayment()
    }
  },
  mounted() {
    // console.log(this.cityList)
  },

  methods: {
    // 计算企业缴纳数额
    changeProvidentFundPayment() {
      this.sizeForm.userSocialSecurity.enterpriseProvidentFundPayment = parseFloat(
        (this.sizeForm.userSocialSecurity.enterpriseProportion * this.sizeForm.userSocialSecurity.providentFundBase) /
            100
      ).toFixed(2)
      // 计算个人缴纳数额
      this.sizeForm.userSocialSecurity.personalProvidentFundPayment = parseFloat(
        (this.sizeForm.userSocialSecurity.personalProportion * this.sizeForm.userSocialSecurity.providentFundBase) /
            100
      ).toFixed(2)
    },

    // 更新数据
    onSubmit() {
      this.saveData()
    },
    // 数据该咋
    computePaymentItemList() {
      let personalTotal = Number(0)
      let companyTotal = Number(0)
      this.paymentItemList.forEach(item => {
        if (item.name === '工伤' && item.switchCompany) {
          item.scaleCompany = this.sizeForm.userSocialSecurity.industrialInjuryRatio
        }
        if (item.switchCompany) {
          item.companyPay = parseFloat(
            (this.sizeForm.userSocialSecurity.socialSecurityBase * item.scaleCompany) / 100
          ).toFixed(2)
          companyTotal = Number(companyTotal + Number(item.companyPay))
        }
        if (item.switchPersonal) {
          item.personalPay = parseFloat(
            (this.sizeForm.userSocialSecurity.socialSecurityBase * item.scalePersonal) / 100
          ).toFixed(2)
          personalTotal = Number(personalTotal + Number(item.personalPay))
        }
      })

      return this.paymentItemList
    },
    socialSecurityCityChange(obj) {
      this.sizeForm.userSocialSecurity.participatingInTheCity = obj
      this.initPaymentItem(obj)
    },
    async saveData() {
      this.sizeForm.userSocialSecurity.enterprisesPaySocialSecurityThisMonth = this.isPaySocialInMonth ? 1 : 0
      this.sizeForm.userSocialSecurity.enterprisesPayTheProvidentFundThisMonth = this.isPayProvidentInMonth ? 1 : 0
      this.sizeForm.userSocialSecurity.userId = this.sizeForm.userId
      var cCity = this.sizeForm.userSocialSecurity.participatingInTheCity
      var fCity = this.sizeForm.userSocialSecurity.participatingInTheCity
      this.sizeForm.userSocialSecurity.participatingInTheCity = cCity.name
      this.sizeForm.userSocialSecurity.participatingInTheCityId = cCity.id
      this.sizeForm.userSocialSecurity.providentFundCityId = fCity.id
      const res = await saveSocialDate(this.$refs.socialForm)
      console.log(this.$refs.socialForm)
      console.log(res)
      this.$message.success('保存成功')
    }
  }
}
</script>

<style lang="scss" scoped>
 .detailContentBox {
    margin: 15px 0;
    padding: 15px;
    background: #fff;
  }
</style>
